import React, { PureComponent } from 'react';
import { StyleSheet, Image, Text, View } from 'react-native';
import { connect } from 'react-redux';
import * as Animatable from 'react-native-animatable';

import { getColors } from '../theme';
import { ic_success } from '../assets';

class ErrorInfo extends PureComponent {
  render() {
    const {
      text,
      visible,
      showIcon = false,
      icon = ic_success,
    } = this.props.errorInfo;

    return (
      <View style={styles.info} pointerEvents="box-none">
        {!!visible && (
          <Animatable.View
            duration={100}
            transition={['opacity']}
            style={[
              styles.textContainer,
              { backgroundColor: getColors().base_oc_17 },
            ]}
          >
            {!!showIcon && <Image style={styles.icon} source={icon} />}
            <Text style={[styles.text, { color: getColors().base_fc_8 }]}>
              {text}
            </Text>
          </Animatable.View>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  info: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 100,
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  textContainer: {
    borderRadius: 4,
    overflow: 'hidden',
    marginHorizontal: 20,
    marginVertical: 20,
    paddingHorizontal: 13,
    paddingVertical: 13,
    alignItems: 'center',
    justifyContent: 'center',
  },
  icon: {
    width: 24,
    height: 24,
    marginBottom: 13,
  },
  text: {
    fontSize: 17,
    lineHeight: 24,
  },
});

const mapStateToProps = state => ({
  errorInfo: state.common.errorInfo,
});
export default connect(
  mapStateToProps,
  null
)(ErrorInfo);
